<template>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
          v-model="form.name"
          name="name"
          label="名称"
          placeholder="请输入名称"
          :rules="[{ required: true, message: '请填写名称' }]"
      />
      <van-field
          name="color"
          v-model="form.color"
          label="颜色"
          placeholder="请选择颜色"
          :rules="[{ required: true, message: '请选择颜色' }]"
      >
        <template #input>
          <color-picker v-model:pureColor="form.color"/>
        </template>
      </van-field>
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>
<script setup lang="ts" name="Home">
import {reactive, ref} from "vue";
import {showNotify} from "vant";
import {useRoute, useRouter} from "vue-router";
import {ColorPicker} from "vue3-colorpicker";
import "vue3-colorpicker/style.css";
import {addType} from "../../../api/manage.ts";

const route = useRoute();
const router = useRouter();
const key = ref(route.query.key as string);
const form = reactive({
  name: "",
  color: "#c8e6ca",
  type: key.value
});

const onSubmit = (values: any) => {
  if (values) {
    addType(form).then((res: any) => {
      showNotify({type: "success", message: "success"});
      router.push({path: "/manage/type", query: {key: key.value}});
    });

  }
};
</script>
